<template>
	<view class="container">
		<!-- 热门城市 -->
		<!-- <view class="hot-section" v-if="hotCities.length">
			<view class="section-title">热门城市</view>
			<scroll-view scroll-x class="hot-scroll">
				<view v-for="city in hotCities" :key="city.cityId" class="hot-item" @click="selectCity(city)">
					{{ city.name }}
				</view>
			</scroll-view>
		</view> -->

		<!-- 城市列表 -->
		<scroll-view scroll-y class="city-scroll" :scroll-into-view="scrollIntoId" :scroll-with-animation="true"
			:show-scrollbar="false">
			<template v-for="group in cityGroups" :key="group.letter">
				<view class="city-group" :id="group.letter">
					<view class="group-title">{{ group.letter }}</view>
					<view v-for="city in group.list" :key="city.cityId" class="city-item" @click="selectCity(city)">
						{{ city.name }}
					</view>
				</view>
			</template>
		</scroll-view>

		<!-- 右侧索引 -->
		<view class="index-bar">
			<text v-for="letter in indexLetters" :key="letter" class="index-letter" @tap="scrollToLetter(letter)">
				{{ letter }}
			</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	const props = defineProps({
		cityList: {
			type: Array,
			default: () => []
		}
	})

	// 当前滚动定位ID
	const scrollIntoId = ref('')

	// 处理城市数据
	const cityGroups = computed(() => {
		// 过滤非热门城市
		const filtered = props.cityList.filter(c => !c.isHot)

		// 按首字母分组
		const groups = filtered.reduce((acc, city) => {
			const letter = city.initial.toUpperCase()
			if (!acc[letter]) acc[letter] = []
			acc[letter].push(city)
			return acc
		}, {})

		// 转换为数组并排序
		return Object.keys(groups)
			.sort()
			.map(letter => ({
				letter,
				list: groups[letter].sort((a, b) => a.name.localeCompare(b.name))
			}))
	})

	// 热门城市
	const hotCities = computed(() =>
		props.cityList.filter(c => c.isHot)
	)

	// 索引字母列表
	const indexLetters = computed(() =>
		cityGroups.value.map(g => g.letter)
	)

	// 点击索引字母
	const scrollToLetter = (letter) => {
		scrollIntoId.value = letter
		// 1秒后清空以支持重复点击
		setTimeout(() => scrollIntoId.value = '', 1000)
	}

	// 城市选择事件
	const emit = defineEmits(['select'])
	const selectCity = (city) => {
		emit('select', city)
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
		position: relative;
	}

	/* 热门城市 */
	.hot-section {
		padding: 20rpx 30rpx;
		background: #fff;

		.section-title {
			color: #666;
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}
	}

	.hot-scroll {
		white-space: nowrap;

		.hot-item {
			display: inline-block;
			padding: 12rpx 40rpx;
			margin-right: 20rpx;
			background: #f5f5f5;
			border-radius: 40rpx;
			font-size: 28rpx;

			&:active {
				background: #eee;
			}
		}
	}

	/* 城市列表 */
	.city-scroll {
		height: calc(100vh);
		padding: 0 30rpx;
	}

	.city-group {
		margin-bottom: 20rpx;

		.group-title {
			color: #999;
			font-size: 24rpx;
			padding: 16rpx 0;
			// background: #fff;
			position: sticky;
			top: 0;
			z-index: 1;
		}

		.city-item {
			padding: 28rpx 0;
			border-bottom: 1rpx solid #eee;
			font-size: 30rpx;

			&:active {
				background-color: #f8f8f8;
			}
		}
	}

	/* 右侧索引 */
	.index-bar {
		position: fixed;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;

		.index-letter {
			color: #007AFF;
			font-size: 24rpx;
			padding: 6rpx 16rpx;

			&:active {
				color: #0051b3;
			}
		}
	}
</style>